<script lang="js" setup>
    import TopHeader from '../components/TopHeader.vue';
    import Map from '../components/Map.vue'
    import MaxMinScores from '../components/MaxMinScores.vue'
    import UniversityInformation from '../components/UniversityInformation.vue'
    import AnnualApplicationNums from '../components/AnnualApplicantsNums.vue'
    import AnnualEnrollmentGrowthRate from '../components/AnnualEnrollmentGrowthRate.vue'
    import NumberOfUniversities from '../components/NumberOfUniversities.vue'
</script>
<template>
    <div class="maindivOne">
    <!--整个可视化容器-->
   <div class="home-container">
       <!--全屏容器-->
       <dv-full-screen-container class="containerOne">
           <!--大标题-->
           <div class="top-header">
           <TopHeader></TopHeader>
           </div>
           <!--数据分析模块-->
           <div class="row" style="position: relative;top: -30px;">
               <!--第一行-->
               <div class="row1">
                        <!--第一行第1列-->
                        <div class="col11">
                         <NumberOfUniversities class="table1"></NumberOfUniversities>
                       </div>
                    <!--第一行第2列-->
                       <div class="col12">
                        <Map class="Map"></Map>
                       </div>
                   <!--第一行第3列-->
                       <div class="col13">
                        <UniversityInformation class="table2"></UniversityInformation>
                       </div> 
               </div>
               <!--第二行-->
               <div class="row2">
                   <!--第二行第1列-->
                       <div class="col21">
                        <AnnualApplicationNums class="circle1"></AnnualApplicationNums>
                       </div>
                    <!--第二行第2列-->
                    <div class="col22">
                        <MaxMinScores class="bar"></MaxMinScores>
                       </div>
                   <!--第二行第3列-->
                       <div class="col23">
                        <AnnualEnrollmentGrowthRate class="circle2"></AnnualEnrollmentGrowthRate>
                       </div>
               </div>
        </div>
       </dv-full-screen-container> 
    </div>
</div>
</template>
<style lang="css">
  .maindivOne{
    width: 100vw;height: 100vh;
    background-image: url('../assets/imgs/imgs-jpg/BackGround.jpg');
    background-size: 100% 100%;
    margin:0;
    padding: 0;
    position:absolute;
    top:0;
    left:0;

  }
    /**全屏容器样式的设置 */
    .containerOne{
        width: 100vw;
        height: 100vh;
    }
    /**头部组件的设置 */
    .top-header{
        width: 100%;
        height: 100px;
    }
    .col12{
        height:650px
    }
    .row1{
        width: 100%;
        height: 50%;
        display: flex;
        flex:1;
    }
    .row2{
        width: 100%;
        height: 50%;
        display: flex;
        flex:1;
        margin-top: -150px;
    }

</style>